<template>
  <div>
    <div class="banner">
      <div class="container">
        <h1>
          <div>
            <el-upload
              class="upload-demo"
              drag
              action="#"
              :on-change="handleChange"
            >
              <i class="el-icon-upload"></i>
              <div class="el-upload__text">
                将文件拖到此处，或<em>点击上传</em>
              </div>
            </el-upload>
          </div>
        </h1>
      </div>
    </div>
    <div class="container">
      <div v-show="loading" class="well loading">正在加载中，请耐心等待...</div>
      <div
        v-show="!loading"
        class="well"
        ref="output"
        v-loading="loading"
      ></div>
    </div>
  </div>
</template>

<script>
import { getExtend, readBuffer, render } from '@/components/util'
export default {
  name: 'HelloWorld',
  props: {
    msg: String,
  },
  data() {
    return {
      loading: false,
      last: null,
      loading: false,
    }
  },
  methods: {
    async handleChange(file) {
      if (!file) return
      this.loading = true
      try {
        let file2 = file.raw
        const arrayBuffer = await readBuffer(file2)
        this.loading = false
        this.last = await this.displayResult(arrayBuffer, file2)
      } catch (file) {
      } finally {
        this.loading = false
      }
    },
    displayResult(buffer, file) {
      const { name } = file
      const extend = getExtend(name)
      const { output } = this.$refs
      const node = document.createElement('div')
      if (this.last) {
        output.removeChild(this.last.$el)
        this.last.$destroy()
      }
      const child = output.appendChild(node)
      return new Promise((resolve, reject) =>
        render(buffer, extend, child).then(resolve).catch(reject)
      )
    },
  },
}
</script>
<style scoped>
.banner {
  overflow: auto;
  text-align: center;
  background-color: #12b6ff;
  color: #000;
}

.loading .banner {
  display: none;
}

.loading .well {
  height: calc(100vh - 12px);
}

.file-select {
  position: absolute;
  left: 5%;
  top: 17px;
  margin-left: 20px;
}

.banner div {
  color: #000;
}

.banner h1 {
  font-size: 20px;
  line-height: 2;
  margin: 0.5em 0;
}

.well {
  display: block;
  background-color: #f2f2f2;
  border: 1px solid #ccc;
  margin: 5px;
  width: calc(100% - 12px);
  height: calc(100vh - 73px);
  overflow: auto;
}

.loading {
  text-align: center;
  padding-top: 50px;
}

.messages .warning {
  color: #cc6600;
}
</style>

<style>
.pptx-wrapper {
  max-width: 1000px;
  margin: 0 auto;
}
</style>
